﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/validation/validation.min.js"></script>
<script src="__STATIC__/vendors/js/jquery.form/jquery.form.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script src="__STATIC__/vendors/js/distpicker/distpicker.min.js"></script>
<script src="__STATIC__/vendors/js/jqueryIDCard/IDCardConfig.js"></script>
<script src="__STATIC__/vendors/js/jqueryIDCard/jQuery-IDCard.js"></script>
<script type="text/javascript">

	//交车日期日期选择器载入
    $('#deliver_date').daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: false,
        locale: {
            format:'YYYY-MM-DD',
        }
    },function(start,end) {
        this.autoUpdateInput = true//选完日期后打开自动赋值
    });

    //客户生日日期选择器载入
    $('#owner_birth').daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: false,
        drops: "up",
        locale: {
            format:'YYYY-MM-DD',
        }
    },function(start,end) {
        this.autoUpdateInput = true//选完日期后打开自动赋值
    });

    //保险到期日期选择器载入
    $('#insurance_expirydate').daterangepicker({
        singleDatePicker: true,
        drops: "up",
        startDate: moment().add(1,'year'),//表示今天的基础上加1年
        autoUpdateInput: false,
        locale: {
            format:'YYYY-MM-DD',
        }
    },function(start,end) {
        this.autoUpdateInput = true//选完日期后打开自动赋值
    });

	//获取配置信息，如传入值，则赋值
    function getConfig(config){
		//组装URL
    	var url = "{:url('Car/carConfigJson',['vehicle'=>''])}"+$("#vehicle").val();
    	//使用replace方法把url里面的+号给替换掉
    	url = url.replace(/\+/g, '%2B');
    	//请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(config_data) {
                // var config_data = $.parseJSON(result);
                //删除市的原有option
                $('#config').empty();
                $('<option></option>').appendTo('#config');
                //添加option
                $.each(config_data, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#config');
                });
                if(config){
                    $('#config').val(config);
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    //获取配置信息
    function getInfo(){
    	//组装URL
    	var url = "{:url('Car/carInfoJson')}?vehicle="+$("#vehicle").val()+"&config="+$("#config").val();
    	//使用replace方法把url里面的+号给替换掉
    	url = url.replace(/\+/g, '%2B');
    	//请求数据
        $.ajax({
            //请求方式
            type : "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url : url,
            //请求成功
            success : function(info_data) {
                // var info_data = $.parseJSON(result);
                //删除市的原有option，给color赋值
                $('#color').empty();
                $('<option></option>').appendTo('#color');
                //添加option
                $.each(info_data.color, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#color');
                });
                //删除市的原有option，给color赋值
                $('#trim').empty();
                $('<option></option>').appendTo('#trim');
                //添加option
                $.each(info_data.trim, function(index,item) {
                    $('<option value="' + item + '">' + item + '</option>').appendTo('#trim');
                });
                //price赋值
                $('#price').val(info_data.price);
                //model赋值
                $('#model').val(info_data.model);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
            	alert('数据有误，请联系管理员');
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }

    //解析身份证号
    function analysisOwnerId(){
        var idCardNo=$(".wrap input").val();
        var a = $(".wrap input").fun({'idCardNo':idCardNo});
        var data = a.options;
        $("#owner_sex").val(data.sex);
        $("#owner_address").val(data.area);
        $("#owner_birth").val(data.birthday); 
    }

    //同步车主及使用人信息
    function synchronization_owner(){
        $("#user_name").val( $("#owner_name").val());
        $("#user_phone").val( $("#owner_phone").val());
    }

	$(document).ready(function () {

        //提交信息
        $("#ajaxForm").ajaxForm({
            //定义返回JSON数据，还包括xml和script格式
            dataType: 'json',
			//在发送之前进行的操作，如果有问题，返回false即可不会进行提交
            beforeSend: function () {
            	//定义 form为当前表格
                const form = $("#ajaxForm")

				//如果没有完成校验就返回false不提交
				if (form[0].checkValidity() === false){
					return false;
				}
            },
            success: function (data) {
                //提交成功后调用
                new Noty({
		            type: "success",
		            layout: "topRight",
		            text: "成功完善了一条数据，ID为" + data,
		            progressBar: true,
		            timeout: 2500,
		            animation: {
		                open: "animated bounceInRight",
		                close: "animated bounceOutRight"
		            },
		            callbacks: {
		            	afterShow: function() {
		            		$(location).attr('href', '{:url('Service/unperfected')}');
		            	},
		            }
		        }).show();
                return false;
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){  
                //提交成功后调用
                new Noty({
		            type: "error",
		            layout: "topRight",
		            text: "数据提交失败",
		            progressBar: true,
		            timeout: 2500,
		            animation: {
		                open: "animated bounceInRight",
		                close: "animated bounceOutRight"
		            }
		        }).show();
		        return false;
            } 
        });

        //如果车系有变化，拉取配置信息
        $("#vehicle").change(function(){
            getConfig();
            $('#color').empty();
            $('<option>请先选择配置</option>').appendTo('#color');
            $('#trim').empty();
            $('<option>请先选择配置</option>').appendTo('#trim');
        });

        //如果车系有变化，拉取配置信息
        $("#config").change(function(){
            getInfo();
        });

        //如果区县选项有变化，反查座标
        $("#owner_county").change(function() {
            var county = $("#owner_county").val();
            if (county != "") {
                var apikey = 'eaf39662425acbd507e7675e1f5cbbda';
                var address = $("#owner_province").val() + $("#owner_city").val() + $("#owner_county").val();
                var city = $("#owner_city").val();
                var url = "https://restapi.amap.com/v3/geocode/geo?output=JSON&key=" + apikey + "&address=" + address + "&city=" + city;
                $.ajax({
                    url: url,
                })
                .done(function(data) {
                    if(data.status == 1){
                        var location = data.geocodes[0].location;
                        $("#owner_location").val(location);
                    }
                })
                .fail(function() {
                    console.log("error");
                });
            }
        });
	});

 
</script>
{/block}

//页面显示名称
{block name="PageName"}
完善客户档案信息
{/block}

//主页面代码
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <div class="widget has-shadow">
        	<div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>完善客户档案信息</h2>
            </div>
            <div class="widget-body">
                <form class="needs-validation" novalidate="" id="ajaxForm" action="{:url('Service/update',['id' => $data.id])}">
                    <div class="form-group row mb-5">
                        <label class="col-xl-3 form-control-label">档案编号</label>
                        <div class="col-xl-9">
                            <div class="input-group">
                                <span class="input-group-addon addon-primary">档案编号* </span>
                                <input type="text" class="form-control" placeholder="请输入档案编号，此前最后一位档案编号为{$lastFileNo},请输入尾号即可" required="required" name="file_no" id="file_no" value="{$data.file_no}" onfocus="(this.value.indexOf('{$data.deliver_date|date='Ym'}') === 0) || (this.value = '{$data.deliver_date|date='Ym'}');">
                                <div class="invalid-feedback">
                                    请输入档案编号
                                </div>
                            </div>
                        </div>
                    </div>
                	<div class="form-group row mb-5">
	                    <label class="col-xl-3 form-control-label">交车相关信息</label>
	                    <div class="col-xl-9">
                            <div class="form-group row">
                                <div class="col">
        	                    	<div class="input-group">
        	                    	 	<span class="input-group-addon addon-secondary">交车日期*</span>
        		                        <input type="date" class="form-control" placeholder="请输入交车日期" required="required" name="deliver_date" id="deliver_date" value="{$data.deliver_date|date='Y-m-d'}">
        		                        <div class="invalid-feedback">
        		                        	请输入交车日期
        		                    	</div>
        		                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">销售顾问*</span>
                                        <input type="text" class="form-control" placeholder="请输入销售顾问信息" required="required" name="sales" id="sales" list="salesList" value="{$data.sales}">
                                        <datalist id="salesList">
                                            {volist name="sales" id="sales"}
                                                <option value="{$sales}"/>
                                            {/volist}
                                        </datalist>
                                        <div class="invalid-feedback">
                                            请输入销售顾问信息
                                        </div>
                                    </div>
                                </div>
                            </div>
	                    </div>
	                </div>
                    <div class="form-group row mb-5">
                        <label class="col-xl-3 form-control-label">客户相关信息</label>
                        <div class="col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">名称*</span>
                                        <input type="text" class="form-control" placeholder="请输入客户名称" name="owner_name" id="owner_name" value="{$data.owner_name}"  required="required">
                                        <div class="invalid-feedback">
                                            请输入客户名称
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">电话*</span>
                                        <input type="phone" class="form-control" placeholder="请输入客户电话" name="owner_phone" id="owner_phone" value="{$data.owner_phone}" required="required">
                                        <div class="invalid-feedback">
                                            请输入客户电话
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group wrap">
                                        <span class="input-group-addon addon-primary">身份证号*</span>
                                        <input type="text" class="form-control" placeholder="请输入客户身份证号" name="owner_id" id="owner_id" value="{$data.owner_id}"  required="required">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-info" onclick="analysisOwnerId()">
                                                解析
                                            </button>
                                        </span>
                                        <div class="invalid-feedback">
                                            请输入客户身份证号
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">性别*</span>
                                        <select class="form-control" name="owner_sex" id="owner_sex" required="required">
                                            <option></option>
                                            <option value="男" {if $data.owner_sex == 1}selected{/if}>男</option>
                                            <option value="女" {if $data.owner_sex == 0}selected{/if}>女</option>
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择客户性别
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车主生日*</span>
                                        <input type="date" class="form-control" placeholder="请输入车主生日" name="owner_birth" id="owner_birth" value="{$data.owner_birth}" required="required">
                                        <div class="invalid-feedback">
                                            请输入车主生日
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">职业*</span>
                                        <input type="text" class="form-control" placeholder="请输入客户的职业" name="owner_occupation" id="owner_occupation" value="{$data.owner_occupation}" required="required" list="occupationList">
                                        <datalist id="occupationList">
                                            {volist name="occupation" id="occupation"}
                                                <option value="{$occupation}" />
                                            {/volist}
                                        </datalist>
                                        <div class="invalid-feedback">
                                            请输入客户的职业
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row" data-toggle="distpicker">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">地址*</span>
                                        <input type="text" class="form-control" placeholder="请输入客户地址" name="owner_address" id="owner_address" value="{$data.owner_address}" required="required">
                                        <div class="invalid-feedback">
                                            请输入客户地址
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row mb-5">
                        <label class="col-xl-3 form-control-label">车辆使用相关信息</label>
                        <div class="col-xl-9">
                            <div class="form-group row" data-toggle="distpicker">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">省*</span>
                                        <select class="form-control" name="owner_province" id="owner_province" data-province="---- 选择省 ----" required="required"></select>
                                        <div class="invalid-feedback">
                                            请选择省
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">市*</span>
                                        <select class="form-control" name="owner_city" id="owner_city" data-city="---- 选择市 ----" required="required"></select>
                                        <div class="invalid-feedback">
                                            请选择市
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">区县*</span>
                                        <select class="form-control" name="owner_county" id="owner_county" data-district="---- 选择区县 ----" required="required"></select>
                                        <div class="invalid-feedback">
                                            请选择区县
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">使用地座标*</span>
                                        <input type="phone" class="form-control" placeholder="请输入使用地座标" name="owner_location" id="owner_location" value="{$data.owner_location}" required="required" readonly="readonly">
                                        <div class="invalid-feedback">
                                            请输入使用地座标
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">使用人名称*</span>
                                        <input type="text" class="form-control" placeholder="请输入使用人名称" name="user_name" id="user_name" value="{$data.user_name}" required="required">
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-info" onclick="synchronization_owner()">
                                                与车主相同
                                            </button>
                                        </span>
                                        <div class="invalid-feedback">
                                            请输入使用人名称
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">使用人电话*</span>
                                        <input type="phone" class="form-control" placeholder="请输入使用人电话" name="user_phone" id="user_phone" value="{$data.user_phone}" required="required">
                                        <div class="invalid-feedback">
                                            请输入使用人电话
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>    
	                <div class="form-group row  mb-5">
	                    <label class="col-xl-3 form-control-label">车辆相关信息</label>
	                    <div class="col-xl-9">
	                    	 <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">车系*</span>
                                        <select class="form-control" name="vehicle" id="vehicle" required="required">
                                            <option></option>
                                            {volist name="vehicleOption" id="vehicleOption"}
                                            	<option value="{$vehicleOption}" {if $data.vehicle == $vehicleOption}selected{/if}>{$vehicleOption}</option>
                                            {/volist}
                                        </select>
                                         <div class="invalid-feedback">
                                            请选择车系
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">配置*</span>
                                        <select class="form-control" name="config" id="config" required="required">
                                            <option></option>
                                            {volist name="configOption" id="configOption"}
                                            <option value="{$configOption}"{if $data.config == $configOption}selected{/if}>{$configOption}</option>
                                            {/volist}
                                        </select>
                                        <div class="invalid-feedback">
                                            请选择配置
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">颜色*</span>
                                        <select class="form-control" name="color" id="color" required="required">
                                            <option></option>
                                            {volist name="colorOption" id="colorOption"}
                                            <option value="{$colorOption}"{if $data.color == $colorOption}selected{/if}>{$colorOption}</option>
                                            {/volist}
                                        </select>
                                         <div class="invalid-feedback">
                                            请选择颜色
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">内饰*</span>
                                        <select class="form-control" name="trim" id="trim" required="required">
                                            <option></option>
                                            {volist name="trimOption" id="trimOption"}
                                            <option value="{$trimOption}"{if $data.trim == $trimOption}selected{/if}>{$trimOption}</option>
                                            {/volist}
                                        </select>
                                         <div class="invalid-feedback">
                                            请选择内饰
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                            	<div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">成交价*</span>
                                        <input class="form-control" type="text" name="final_price" id="final_price" required="required" value="{$data.final_price}">
                                        <div class="invalid-feedback">
                                            请填写成交价
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">车型编码*</span>
                                        <input class="form-control" type="text" name="model" id="model" required="required" value="{$data.model}" style="text-transform:uppercase;">
                                         <div class="invalid-feedback">
                                            请填写车型编码
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row">
                            	<div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">车架号*</span>
                                        <input class="form-control" type="text" name="vin" required="required" value="{$data.vin}" style="text-transform:uppercase;">
                                        <div class="invalid-feedback">
                                            请填写车架号
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-secondary">发动机号*</span>
                                        <input class="form-control" type="text" name="engine" required="required" value="{$data.engine}" style="text-transform:uppercase;">
                                         <div class="invalid-feedback">
                                            请填写发动机号
                                        </div>
                                    </div>
                                </div>
                            </div>
	                    </div>
	                </div>
                    <div class="form-group row mb-5">
                        <label class="col-xl-3 form-control-label">其它相关信息</label>
                        <div class="col-xl-9">
                            <div class="form-group row">
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">车牌号</span>
                                        <input class="form-control" type="text" name="plate_number" placeholder="请输入车牌号" value="{$data.plate_number}">
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">保险公司</span>
                                        <input type="text" class="form-control" placeholder="请输入保险公司" name="insurance_company" id="insurance_company" value="{$data.insurance_company}" list="insurance_company_list" >
                                        <datalist id="insurance_company_list">
                                            {volist name="insurance_company_list" id="insurance_company_list"}
                                                <option value="{$insurance_company_list}"/>
                                            {/volist}
                                        </datalist>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="input-group">
                                        <span class="input-group-addon addon-primary">保险到期</span>
                                        <input type="date" class="form-control" placeholder="请输入保险到期日期" name="insurance_expirydate" id="insurance_expirydate">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
	                <div class="text-right">
		                <button class="btn btn-shadow" type="reset" onclick="history.go(-1);">取消</button>
		                <button class="btn btn-gradient-01" type="submit">提交</button>
		            </div>
		        </form>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>
{/block}//主页面
